<template>
    <view class="bar-sticky header-box-shadow" :class="[className]">
        <view :style="{paddingTop: lineHeight, background: bgColor || normal.background}">
            <view class="bar-line container-in" :style="{background: bgColor || normal.background}">
                <view class="bar-font bar-content" v-if="!custom">
                    <view v-if="showBack" class="bar-back iconfont icon-jiantou2"></view>
                    <text v-if="label" class="bar-label">{{ label }}</text>
                    <text v-if="subLabel" class="bar-sub-label">{{ subLabel }}</text>
					<view class="bar-title" :style="{color: titleColor || normal.fontColor}">{{ title }}</view>
                </view>
            </view>
			<view>
			    <slot></slot>
			</view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            custom: {
                type: Boolean,
                default: false
            }, //自定义头部，否则沿用原生的头部样式
            navigationBarStyle: {
                type: Object,
                default: function() {
                    return {
                        background: '#FFFFFF',
                        fontColor: '#000000',
                        iconColor: '#000000',
                        iconText: '未命名' //导航栏文字
                    }
                }
            }, 
			bgColor: {
				type: String,
				default: "#FFFFFF"
			},
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				color: String,
				default: ""
			},
			label: {
				type: String,
				default: ''
			},
			subLabel: {
				type: String,
				default: ''
			},
			className: {
				type: String,
				default: ""
			},
            showBack: {
                type: Boolean,
                default: true
            }, //是否显示回退图标，默认显示
        },
        data() {
            return {
                normal: {
                    background: '#FFFFFF',
                    fontColor: '#000000',
                    iconColor: '#000000',
                }, //公用样式,个性化样式可通过传值实现
                lineHeight: '' //状态栏高度
            };
        },
		
        mounted() {
            const systemInfo = uni.getSystemInfoSync();
            // px转换到rpx的比例
            let pxToRpxScale = 750 / systemInfo.windowWidth;
            let systems = {
                ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
                navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
                ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
                ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
                ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
            }
            // 底部tabBar的高度
            systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems.ktxWindowHeight // 底部tabBar的高度
            this.lineHeight = systems.ktxStatusHeight + 'rpx';
            this.$emit('getHeight', systems)
        },
		methods: {
			// back(){
			// 	// navigateBackParams({
			// 	// 	backType: 'back'
			// 	// })
			// }
		}
    }
</script>

<style lang="scss" scoped>
	// @import "@/styles/var.scss";
    /*正中*/
    .bar-content {
		position: relative;
        width: 100%;
        display: flex;
        align-items: center;
		justify-content: center;
    }

    //导航栏吸顶效果
    .bar-sticky {
        position: sticky;
        top: 0;
        z-index: 101;
    }

    /*垂直居中*/
    .container-in {
        display: flex;
        width: 100%;
        height: 44px;
    }

    .bar-line {
        height: 44px; //导航栏高度
        .bar-back {
			position: absolute;
			left: 24rpx;
            font-size: 24rpx;
			margin-left: 24rpx;
			background-color: #f3f3f5;
			border-radius: 24rpx;
			width: 64rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
        }
		.bar-label {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			margin-left: 24rpx;
			line-height: 1;
		}
		.bar-sub-label {
			// color: #color-9;
			font-size: 28rpx;
			margin-left: 8rpx;
		}
        .bar-title {
            font-size: 32rpx;
        }
    }
	// .header-box-shadow {
	// 	box-shadow: 0 10rpx 28rpx 0 rgba(0, 0, 0, .05);
	// }
</style>